<script setup lang="ts">
import { ref } from "vue";
import { PureTableBar } from "@/components/RePureTableBar";
import { useProfile } from "./utils/hook";
import { formRules } from "./utils/rule";
defineOptions({
  name: "AdminGeneralProfile"
});

const formRef = ref();

const {
  form,
  isShowAvatarEdit,
  pagination,
  dataList,
  loading,
  columns,
  handleUpload,
  onSearch,
  onSubmite,
  resetForm,
  deviceDetection,
  handleSelectionChange,
  handleSizeChange,
  handleCurrentChange
} = useProfile();
</script>

<template>
  <div :class="['flex', 'justify-between', deviceDetection() && 'flex-wrap']">
    <div
      class="profile"
      :class="['mr-6', deviceDetection() ? 'w-full' : 'min-w-[600px]']"
    >
      <div class="title">个人中心</div>
      <el-form
        ref="formRef"
        label-position="top"
        label-width="100px"
        :model="form"
        :rules="formRules"
        style="max-width: 460px; margin-left: 20px"
      >
        <div
          class="avatar-uploader"
          @click="handleUpload(form)"
          @mouseenter="isShowAvatarEdit = true"
          @mouseleave="isShowAvatarEdit = false"
        >
          <!-- el-upload action 带请求头如何配置 -->
          <img v-if="form.avatar != ''" :src="form.avatar" class="avatar" />
          <img v-else :src="form.avatar" class="avatar" />
          <el-icon v-if="isShowAvatarEdit" class="avatar-uploader-icon">
            修改头像
          </el-icon>
        </div>
        <el-form-item label="账户">
          <el-input v-model="form.userName" disabled />
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input v-model="form.mobile" disabled />
        </el-form-item>
        <el-form-item label="昵称" prop="nickName">
          <el-input v-model="form.nickName" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="form.email" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="form.password" type="password" show-password />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :loading="loading" @click="onSubmite()">
            确定
          </el-button>
          <el-button @click="resetForm(formRef)"> 重置 </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div
      :class="[deviceDetection() ? ['w-full', 'mt-2'] : 'w-[calc(100%-200px)]']"
    >
      <PureTableBar title="操作记录" :columns="columns" @refresh="onSearch">
        <template v-slot="{ size, dynamicColumns }">
          <pure-table
            ref="tableRef"
            row-key="id"
            adaptive
            :adaptiveConfig="{ offsetBottom: 108 }"
            align-whole="center"
            table-layout="auto"
            :loading="loading"
            :size="size"
            :data="dataList"
            :columns="dynamicColumns"
            :pagination="pagination"
            :paginationSmall="size === 'small' ? true : false"
            :header-cell-style="{
              background: 'var(--el-fill-color-light)',
              color: 'var(--el-text-color-primary)'
            }"
            @selection-change="handleSelectionChange"
            @page-size-change="handleSizeChange"
            @page-current-change="handleCurrentChange"
          />
        </template>
      </PureTableBar>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.profile {
  // border-radius: 4px;
  // padding: 14px;
  margin-top: 0.5rem;
  background-color: var(--el-bg-color);

  .title {
    margin: 1rem 1.5rem;
    font-size: 18px;
    font-weight: bold;
  }
}

.avatar-uploader {
  position: relative;
  padding: 40px 0 60px;
  text-align: center;
}

.avatar-uploader .avatar {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 100px;
  height: 100px;
  margin: auto;
  overflow: hidden;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.avatar-uploader .el-upload {
  position: relative;
  overflow: hidden;
  text-align: center;
  cursor: pointer;
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  position: absolute;
  // display: none;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  font-size: 16px;
  color: white;
  text-align: center;
  pointer-events: none;
  background: rgb(77 77 77 / 22.6%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
</style>
